﻿<!DOCTYPE HTML>
<html lang="zh-cn" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>我的账户</title>

  <link href="/plugins/bootstrap-3.3.0/css/bootstrap.min.css" rel="stylesheet"/>
  <link href="/plugins/material-design-iconic-font-2.2.0/css/material-design-iconic-font.min.css"
        rel="stylesheet"/>
  <link href="/plugins/awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css" rel="stylesheet"/>
  <link href="/plugins/font-awesome-4.7.0/css/font-awesome.css" rel="stylesheet"/>
  <link href="/plugins/bootstrap-table-1.11.0/bootstrap-table.min.css" rel="stylesheet"/>
  <link href="/plugins/waves-0.7.5/waves.min.css" rel="stylesheet"/>
  <link href="/plugins/jquery-confirm/jquery-confirm.min.css" rel="stylesheet"/>

  <!--select2-->
  <link href="https://cdn.bootcss.com/select2/4.0.3/css/select2.min.css" rel="stylesheet"/>

  <!--<link href="/app/css/common.css" rel="stylesheet"/>-->
  <link href="/app/css/account.css" rel="stylesheet"/>
</head>
<body>
<div id="main">
  <div class="container-fluid">
    <div class="row">
      <!--col-md-6-->
      <div class="col-md-6">
        <div class="account-info">
          <h3>账户信息</h3>
          <p>
            <label>登录名:</label>
            <span id="name">{{user.loginName}}</span>
          </p>
          <p>
            <label>昵称:</label>
            <span id="nickname" v-if="user.nickname">{{user.nickname}}</span>
            <span id="nickname" v-else>--</span>
          </p>
          <p>
            <label>手机:</label>
            <span id="phone" v-if="user.phone">{{user.phone}}</span>
            <span id="phone" v-else>--</span>
          </p>
          <p>
            <label>生日:</label>
            <span id="birthday" v-if="user.birthday">{{user.birthday}}</span>
            <span id="birthday" v-else>--</span>
          </p>
          <p>
            <label>邮箱:</label>
            <span id="email" v-if="user.email">{{user.email}}</span>
            <span id="email" v-else>--</span>
          </p>
        </div>
      </div>
      <!--row-->
    </div>
  </div>
</div>

<script src="/plugins/jquery.1.12.4.min.js"></script>
<script src="/plugins/bootstrap-3.3.0/js/bootstrap.min.js"></script>
<script src="/plugins/bootstrap-table-1.11.0/bootstrap-table.min.js"></script>
<script src="/plugins/bootstrap-table-1.11.0/locale/bootstrap-table-zh-CN.min.js"></script>
<script src="/plugins/waves-0.7.5/waves.min.js"></script>
<script src="/plugins/jquery-confirm/jquery-confirm.min.js"></script>
<script src="https://cdn.bootcss.com/moment.js/2.18.1/moment.min.js"></script>

<!--给form使用-->
<!-- select2 -->
<script src="https://cdn.bootcss.com/select2/4.0.3/js/select2.min.js"></script>
<script src="https://cdn.bootcss.com/select2/4.0.3/js/i18n/zh-CN.js"></script>

<!-- InputMask -->
<script src="/plugins/input-mask/jquery.inputmask.js"></script>
<script src="/plugins/input-mask/jquery.inputmask.date.extensions.js"></script>
<script src="/plugins/input-mask/jquery.inputmask.extensions.js"></script>

<script src="/app/js/common.js"></script>
<script src="/plugins/vue/2.3.4/vue.min.js"></script>
<script src="/app/js/i-ajax.js"></script>
<script>
var accountData={
  user:{
    userId:'',
    nickname: '',
    birthday: '',
    phone: '',
    email: '',
    loginName: '',
  }
};
var util = {
  getCurrentAccount: function (id, fc) {
    iGet('/sys/user/'+id,function (data) {
      var user = data.content;
      console.info("account======");
      console.info(user);
      fc(user);
    })
  },
  formatDate: function (user) {
    var birthday = user.birthday;
    user.birthday = birthday ? moment(birthday).format("YYYY-MM-DD") : '-';
  },
  initData: function (that) {
    var userId = parent.data.user.id;
    console.info("userId====");
    console.info(userId);
    if (userId){
      this.getCurrentAccount(userId, function (user_) {
        that.user = user_;
      });
    }
    this.formatDate(that.user);
  },
};
var vue = new Vue({
  el: '#main',
  data: accountData,
  created: function () {
    console.info("vue created");
    console.info(this);
    util.initData(this);
  },
  methods: {
    ok: function (text) {
      alert(text);
    },
  }
});
function updSubmit() {
  var data = {};
  $('#updateAppForm').serializeArray().map(function (x) {
    data[x.name] = x.value;
  });
  console.info("========updSub=====");
  console.info(data);
  var beforeSend = function () {
    $("#updateAppForm input[type=text]").each(function (ob, index) {
      console.info(ob);
      if ($(this).val() == '') {
        $(this).focus();
        return false;
      }
    });
  };
  var success = function (result) {
    $.confirm({
      theme: result.status == 'SUCCESS' ? 'light' : 'dark',
      animation: 'rotateX',
      closeAnimation: 'rotateX',
      title: false,
      content: result.msg,
      buttons: {
        confirm: {
          text: '确认',
          btnClass: 'waves-effect waves-button waves-light',
          action: function () {
//            accountData.account.appId = data['appId'];
//            accountData.account.appKey = data['appKey'];
          }
        }
      }
    });
  };
  var error = function (jqXHR, textStatus) {
    $.confirm({
      theme: 'dark',
      animation: 'rotateX',
      closeAnimation: 'rotateX',
      title: false,
      content: textStatus != 'canceled' ? '系统异常' : '请检查密码与用户名',
      buttons: {
        confirm: {
          text: '确认',
          btnClass: 'waves-effect waves-button waves-light'
        }
      }
    });
  };
  var userId = parent.data.user.id;
  iPut('/sys/user/' + userId, data, beforeSend, success, error);
}
</script>
</body>
</html>